<div nz-row class="bdDiv">
    <nz-tabset class="tab" nz-col [nzOffset]="7" [nzSpan]="10">
        <nz-tab>
            <ng-template #nzTabHeading>
                学生注册
            </ng-template>
            <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm ()" class="register-form">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>邮箱</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
                        <nz-input [nzSize]="'large'" formControlName="email"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">请输入有效邮箱！</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="password" nz-form-item-required>密码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
                        <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入您的密码!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="checkPassword" nz-form-item-required>确认密码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
                        <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请输入确认密码!</div>
                        <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次密码输入不一致!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="name" nz-form-item-required>
                                        <span>
                                            姓名
                                        </span>
                                    </label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
                        <nz-input [nzSize]="'large'" formControlName="name"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入姓名!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="sex" nz-form-item-required>
                                <span>
                                    性别
                                </span>
                            </label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select [nzSize]="'large'" formControlName="sex" nzPlaceHolder="请选择" style="width: 50%;">
                            <nz-option *ngFor="let sex of sexs" [nzValue]="sex" [nzLabel]="sex"></nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="phoneNumber" nz-form-item-required>电话号码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-input-group [nzSize]="'large'" [nzCompact]="true">
                            <nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
                                <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
                                <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
                            </nz-select>
                            <input formControlName="phoneNumber" nz-input style="width: 75%;">
                        </nz-input-group>
                    </div>
                </div>
                <div nz-form-item nz-row style="margin-bottom:8px;">
                    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
                        <label nz-checkbox formControlName="agree">
                                    <span>我已阅读并同意相关 <a>服务条款和隐私政策</a></span>
                                </label>
                    </div>
                </div>
                <div nz-form-item nz-row style="margin-bottom:8px;">
                    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
                        <button nz-button [nzSize]="'large'" [nzType]="'primary'">注册</button>
                    </div>
                </div>
            </form>
        </nz-tab>
        <nz-tab>
            <ng-template #nzTabHeading>
                老师注册
            </ng-template>
            <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitFormTeacher()" class="register-form">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>邮箱</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getTeacherFormControl('email')">
                        <nz-input [nzSize]="'large'" formControlName="email"></nz-input>
                        <div nz-form-explain *ngIf="getTeacherFormControl('email').dirty&&getTeacherFormControl('email').hasError('email')">请输入有效邮箱！</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="password" nz-form-item-required>密码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getTeacherFormControl('password')">
                        <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" (ngModelChange)="updateTeacherConfirmValidator()"></nz-input>
                        <div nz-form-explain *ngIf="getTeacherFormControl('password').dirty&&getTeacherFormControl('password').hasError('required')">请输入您的密码!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="checkPassword" nz-form-item-required>确认密码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getTeacherFormControl('checkPassword')">
                        <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'"></nz-input>
                        <div nz-form-explain *ngIf="getTeacherFormControl('checkPassword').dirty&&getTeacherFormControl('checkPassword').hasError('required')">请输入确认密码!</div>
                        <div nz-form-explain *ngIf="getTeacherFormControl('checkPassword').dirty&&getTeacherFormControl('checkPassword').hasError('confirm')">两次密码输入不一致!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="name" nz-form-item-required>
                                        <span>
                                            姓名
                                        </span>
                                    </label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getTeacherFormControl('name')">
                        <nz-input [nzSize]="'large'" formControlName="name"></nz-input>
                        <div nz-form-explain *ngIf="getTeacherFormControl('name').dirty&&getTeacherFormControl('name').hasError('required')">请输入姓名!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="sex" nz-form-item-required>
                                <span>
                                    性别
                                </span>
                            </label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select [nzSize]="'large'" formControlName="sex" nzPlaceHolder="请选择" style="width: 50%;">
                            <nz-option *ngFor="let sex of sexs" [nzValue]="sex" [nzLabel]="sex"></nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="phoneNumber" nz-form-item-required>电话号码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getTeacherFormControl('phoneNumber')">
                        <nz-input-group [nzSize]="'large'" [nzCompact]="true">
                            <nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
                                <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
                                <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
                            </nz-select>
                            <input formControlName="phoneNumber" nz-input style="width: 75%;">
                        </nz-input-group>
                        <div nz-form-explain *ngIf="getTeacherFormControl('phoneNumber').dirty&&getTeacherFormControl('phoneNumber').hasError('required')">请输入您的手机号码!</div>
                    </div>
                </div>
                <div nz-form-item nz-row style="margin-bottom:8px;">
                    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
                        <label nz-checkbox formControlName="agree">
                                    <span>我已阅读并同意相关 <a>服务条款和隐私政策</a></span>
                                </label>
                    </div>
                </div>
                <div nz-form-item nz-row style="margin-bottom:8px;">
                    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
                        <button nz-button [nzSize]="'large'" [nzType]="'primary'">注册</button>
                    </div>
                </div>
            </form>
        </nz-tab>
    </nz-tabset>

</div>